<html>
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>如何在 Markdown 中插入视频和音频 | 夏元素的避风塘</title>
<meta name="description" content="理想生活+" />
<link rel="shortcut icon" href="https://Jason-summer.github.io/favicon.ico">
<link rel="stylesheet" href="https://Jason-summer.github.io/styles/main.css">

<script src="https://Jason-summer.github.io/media/js/jquery.min.js"></script>
<script src="https://Jason-summer.github.io/media/js/masonry.pkgd.min.js"></script>
<script src="https://Jason-summer.github.io/media/js/aos.js"></script>
<script src="https://Jason-summer.github.io/media/js/pace.min.js"></script>
<script src="https://Jason-summer.github.io/media/js/view-image.min.js"></script>
<script src="https://Jason-summer.github.io/media/js/jquery.magnific-popup.min.js"></script>
<script src="https://Jason-summer.github.io/media/js/functions.js"></script>
    <meta name="referrer" content="never">
    <meta name="description" content="
本篇文章的受众是那些没有 xml 基础，并且像我一样🤣只会基础 Markdown 的小白。

插入音乐

请注意版权问题，避免版权纠纷！！！以下出现的视频和音频仅供示例，请勿用作其他用途。

使用 html

      
      ..." />
    <meta name="keywords" content="Markdown" />
    <script src="https://Jason-summer.github.io/media/js/waterfall.min.js"></script>
    <script src="https://Jason-summer.github.io/media/js/prism.min.js"></script>
  </head>
  <body>
            <header id="header" class="grid-container">
        <!-- start: .menu-wrapper -->
        <div class="menu-mobile"> 
          <i class="fa fa-reorder"></i>
        </div>
        <div class="menu-wrapper">
          <div class="">
            <div class="logo">
              <a href="https://Jason-summer.github.io"><img src="\media\images\custom-headerLogo.jpg" alt=""></a>
            </div>
            <!-- start: .main-nav -->

            <nav class="main-nav grid-container grid-parent">
              <ul id="menu-header" class="menu gradient-effect">
                <li class=""><a href="https://Jason-summer.github.io" class="menu">首页</a></li>
                
                  <li class="" >
                    <a href="/archives" class="menu">
                      归档
                    </a>
                  </li>
                
                  <li class="" >
                    <a href="/tags" class="menu">
                      标签
                    </a>
                  </li>
                
                  <li class="" >
                    <a href="/post/about" class="menu">
                      关于
                    </a>
                  </li>
                
                  <li class="" >
                    <a href="/movies" class="menu">
                      观影
                    </a>
                  </li>
                
                  <li class="" >
                    <a href="/books" class="menu">
                      书籍
                    </a>
                  </li>
                
                  <li class="" >
                    <a href="/friends" class="menu">
                      友人
                    </a>
                  </li>
                
                <li class="search-menu-item hide-on-mobile hide-on-tablet"><a href="#search-lightbox" class="lightbox mfp-inline"><i class="fa fa-search-line"></i></a></li>
              </ul>
            </nav>
            <a href="#search-lightbox" class="lightbox epcl-search-button mfp-inline hide-on-tablet hide-on-desktop"><i class="fa fa-search-line"></i></a>
            <!-- end: .main-nav -->
            <div class="clear"></div>
            <div class="border hide-on-tablet hide-on-mobile"></div>
          </div>    
          <div class="clear"></div>
        </div>
        <!-- end: .menu-wrapper -->
        <div class="clear"></div>
      </header>
      <div class="hide-on-mobile hide-on-tablet hide-on-desktop">
        <div id="search-lightbox" class="grid-container grid-small grid-parent mfp-hide">
          <div class="search-wrapper section">
            <form id="gridea-search-form" data-update="1588054322263" action="/search/index.html" class="search-form" _lpchecked="1">
              <input type="text" name="q" id="s" value="" class="search-field" placeholder="搜点啥..." aria-label="搜点啥..." required="">
              <button type="submit" class="submit" aria-label="Submit">
                <i class="fa fa-search-line"></i>
              </button>
            </form>
          </div>
        </div>
      </div>

      <main id="single" class="main grid-container fullcover no-sidebar aos-init aos-animate" data-aos="fade">

        <div class="center content">
          <div class="featured-image cover" style="background-image: url('/media/images/gridea.jpg');">
            <div class="meta top"> 
              <time class="meta-info" style="float:left;" datetime="2020-04-04"><i class="fa fa-calendar"></i><span class="lately">24 天前</span></time>
              
              <a href="https://Jason-summer.github.io/post/how-to-add-audios-and-videos-to-your-markdown/#comments" class="comments meta-info" title="">
                <i class="fa fa-comment remixicon"></i><span class="comment-count valine-comment-count" data-xid="/how-to-add-audios-and-videos-to-your-markdown/"> </span>
              </a>
              <span id="/how-to-add-audios-and-videos-to-your-markdown/" class="leancloud_visitors views-counter meta-info" title=""><i class="fa fa-leancloud remixicon"></i><span class="leancloud-visitors-count"></span></span>
              
            </div>
            <div class="info">
              <div class="tags ">
                
                      <a href="https://Jason-summer.github.io/tag/markdown/" class="ctag ctag-0 ctag-markdown" aria-label="">Markdown</a>
                    
              </div>
              <h1 class="title ularge white bold">如何在 Markdown 中插入视频和音频</h1>
            </div>
          </div>
        </div>  

        <div class="epcl-page-wrapper">
          <div class="left-content grid-70 np-mobile">
            <article class="main-article post">
              <section class="post-content">
                <div class="text">
                  <blockquote>
<p>本篇文章的受众是那些没有 xml 基础，并且像我一样🤣只会基础 Markdown 的小白。</p>
</blockquote>
<h2 id="插入音乐">插入音乐</h2>
<blockquote>
<p>请注意版权问题，避免版权纠纷！！！以下出现的视频和音频仅供示例，请勿用作其他用途。</p>
</blockquote>
<h3 id="使用-html">使用 html</h3>
<audio id="audio" controls="" preload="none">
      <source id="m4a" src="https://gitee.com/WhiteMountain/blog-resources/raw/master/%E6%96%B9%E5%9C%86%E5%87%A0%E9%87%8C%20-%20%E8%96%9B%E4%B9%8B%E8%B0%A6.m4a">
      </audio> 
<p>//这是薛之谦的方圆几里，仅供示例使用，请勿用作其他用途。</p>
<pre><code class="language-xml">&lt;audio id=&quot;audio&quot; controls=&quot;&quot; preload=&quot;none&quot;&gt;
      &lt;source id=&quot;m4a&quot; src=&quot;https://gitee.com/WhiteMountain/blog-resources/raw/master/%E6%96%B9%E5%9C%86%E5%87%A0%E9%87%8C%20-%20%E8%96%9B%E4%B9%8B%E8%B0%A6.m4a&quot;&gt;
      &lt;/audio&gt;
</code></pre>
<p><code>&lt;audio&gt;</code>标签常用属性如下表</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>autoplay</td>
<td>autoplay</td>
<td>添加该属性后，音频会自动播放</td>
</tr>
<tr>
<td>controls</td>
<td>controls</td>
<td>设置后，显示控件，如播放按钮、音量</td>
</tr>
<tr>
<td>loop</td>
<td>loop</td>
<td>添加该属性后，当音频播放结束后会重新开始播放</td>
</tr>
<tr>
<td>preload</td>
<td>preload</td>
<td>音频显示页面加载，准备播放，如已添加autoplay,则忽略该属性</td>
</tr>
<tr>
<td>src</td>
<td>url</td>
<td>播放音频的URL（地址）。</td>
</tr>
</tbody>
</table>
<p>插入这首歌只是复制粘贴几行代码的事情，并不算难，困难的部分在于找到一个 source 放置你的歌曲且能直接访问。这里我使用了以下几种方法。</p>
<p>方法一、上传到 Github，new repositories，然后上传文件。然后复制文件页面<strong>Download</strong>按钮的链接，例如<code>https://raw.githubusercontent.com/Jason-summer/blog-resources/master/%E6%96%B9%E5%9C%86%E5%87%A0%E9%87%8C%20-%20%E8%96%9B%E4%B9%8B%E8%B0%A6.m4a</code>。坏处是 GitHub 极其不稳定，想要访问这个文件需要科学上网，那就不适用于我们了。</p>
<p>方法二、尽然 GitHub 不行，我们就更换一个代码托管平台呗。国内的平台有 Gitee 和 Coding 等，操作方法与 GitHub 的大同小异。</p>
<p>方法三、上传到个人云盘，然后分享。</p>
<h3 id="使用各个音乐平台提供的插件">使用各个音乐平台提供的插件</h3>
<p>网易云音乐提供了将音乐生成外链（某些版权歌曲不可）的插件。访问网易云的网页，在某首歌曲的详情页有<strong>生成外链播放器</strong>，接下来只要把获得的代码插入 Markdown 中就行了。</p>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=27955658&auto=0&height=66"></iframe>
<p><embed src="//music.163.com/style/swf/widget.swf?sid=27955658&type=2&auto=0&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed></p>
<h2 id="插入视频">插入视频</h2>
<p>你可以把视频存进你的网盘，然后通过分享的方式，在分享页面用一些特殊的方法[^1]找到视频地址。不过一般来说网盘中的视频地址不久就会改变，所以很有可能失效。</p>
<video id="video" controls="" preload="none" poster="https://i.vimeocdn.com/video/862586401_640x360.jpg">
      <source id="mp4" src="https://gzc-download.weiyun.com/ftn_handler/4172f99714837bfe77b3284a78733bfb4c12550b163ca17bc4f52aaff067fb04/Iceland%20-%2033191-1.mp4?fname=Iceland%20-%2033191-1.mp4&from=30111&version=3.3.3.3" type="video/mp4">
      </video>
<p>该视频由<a href="https://pixabay.com/zh/users/Roberto2016-2122248/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=33191">Roberto D'Amico</a>在<a href="https://pixabay.com/zh/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=33191">Pixabay</a>上发布</p>
<pre><code class="language-xml">&lt;video id=&quot;video&quot; controls=&quot;&quot; preload=&quot;none&quot; poster=&quot;https://i.vimeocdn.com/video/862586401_640x360.jpg&quot;&gt;
      &lt;source id=&quot;mp4&quot; src=&quot;https://gzc-download.weiyun.com/ftn_handler/4172f99714837bfe77b3284a78733bfb4c12550b163ca17bc4f52aaff067fb04/Iceland%20-%2033191-1.mp4?fname=Iceland%20-%2033191-1.mp4&amp;from=30111&amp;version=3.3.3.3&quot; type=&quot;video/mp4&quot;&gt;
      &lt;/video&gt;
</code></pre>
<p>如果你有视频在互联网上的地址的话，你可以使用链接直接播放。</p>
<video id="video" controls="" preload="none" poster="https://wedistill.io/uploads/thumbnails/34/Adrift-HD.mp4-poster.png">
      <source id="mp4" src="https://wedistill.io/uploads/videos/processed/34/Adrift-HD.mp4.mp4" type="video/mp4">
      </video>
<pre><code class="language-xml">&lt;video id=&quot;video&quot; controls=&quot;&quot; preload=&quot;none&quot; poster=&quot;https://wedistill.io/uploads/thumbnails/34/Adrift-HD.mp4-poster.png&quot;&gt;
      &lt;source id=&quot;mp4&quot; src=&quot;https://wedistill.io/uploads/videos/processed/34/Adrift-HD.mp4.mp4&quot; type=&quot;video/mp4&quot;&gt;
      &lt;/video&gt;
</code></pre>
<p>Made by <a href="http://www.createthebridge.com/">Create the Bridge</a></p>
<p>当然，还得考虑原视频会不会下架、消失，所以最好还是存进自己的仓库吧（注意版权问题）。</p>
<video id="video" controls="" preload="none" poster="https://gitee.com/WhiteMountain/blog-resources/raw/master/Adrift-HD.mp4-poster.png">
      <source id="mp4" src="https://gitee.com/WhiteMountain/blog-resources/raw/master/Adrift-HD.mp4.mp4" type="video/mp4">
      </video>
<pre><code class="language-xml">&lt;video id=&quot;video&quot; controls=&quot;&quot; preload=&quot;none&quot; poster=&quot;https://gitee.com/WhiteMountain/blog-resources/raw/master/Adrift-HD.mp4-poster.png&quot;&gt;
      &lt;source id=&quot;mp4&quot; src=&quot;https://gitee.com/WhiteMountain/blog-resources/raw/master/Adrift-HD.mp4.mp4&quot; type=&quot;video/mp4&quot;&gt;
      &lt;/video&gt;
</code></pre>
<p>部分内容来源：http://blog.fandong.me/2017/08/25/Markdown-Advance/<br>
https://www.cnblogs.com/lmlblogs/p/8732342.html<br>
如有侵权，请联系我删除😀。</p>

                </div>
                <div class="clear"></div>
              </section>
            </article>
            <div class="clear"></div>

            <section class="related section">
              
              <article class="prev grid-50 tablet-grid-50 grid-parent">
                <div class="thumb cover lazy loaded" style="background-image: url('https://Jason-summer.github.io/media/images/gridea.jpg');"></div>
                 <a href="https://Jason-summer.github.io/post/dui-shi-wu-de-tan-suo-yi-lan-qing-dan/" class="full-link"></a>
                 <div class="info">
                  <time datetime="2020-04-04">2020-04-04</time>
                  <h4 class="title white no-margin">对事物的探索，一览清单</h4>
                </div>
                 <span class="epcl-button red">
                  <img src="https://Jason-summer.github.io/media/images/left-arrow.svg" width="15" alt="Left Arrow">
                </span>
                <div class="overlay"></div>
              </article>
              
              
              <article class="next grid-50 tablet-grid-50 grid-parent">
                <div class="thumb cover lazy loaded" style="background-image: url('https://Jason-summer.github.io/post-images/how-to-use-android-studio-offline.jpg');"></div>
                 <a href="https://Jason-summer.github.io/post/how-to-use-android-studio-offline/" class="full-link"></a>
                 <div class="info">
                  <time datetime="2020-04-03">2020-04-03</time>
                  <h4 class="title white no-margin">在国内，如何离线使用 Android Studio🧐?</h4>
                </div>
                 <span class="epcl-button red">
                  <img src="https://Jason-summer.github.io/media/images/right-arrow.svg" width="15" alt="Left Arrow">
                </span>
                <div class="overlay"></div>
              </article>
              

                <div class="clear"></div>
            </section>

              <div class="clear"></div>
              
            
              <div id="comments" class="bg-white hosted ">
                
                  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

<div id="gitalk-container"></div>
<div class="clear"></div>

<script>
  var gitalk = new Gitalk({
    clientID: 'd58ad16ad66ee00d3bc5',
    clientSecret: 'ac26e1eeae0d0cb7e660f5cfe7d5139eea8fb3fd',
    repo: 'Jason-summer.github.io',
    owner: 'Jason-summer',
    admin: ['Jason-summer'],
    id: (location.pathname).substring(0, 49),      // Ensure uniqueness and length less than 50
    distractionFreeMode: false  // Facebook-like distraction free mode
  })

  gitalk.render('gitalk-container')
</script>

                
                
              </div>
            

            </div>
          </div>
      </main>

          <footer id="footer" class="grid-container">
        <div class="widgets row gradient-effect">
            <div class="default-sidebar border-effect">
              <div class="grid-33 tablet-grid-50 mobile-grid-100">
                <section id="tag_cloud-2" class="widget widget_epcl_posts_thumbs underline-effect">
                  <h4 class="widget-title title white bordered">最新文章</h4>
                  
                  
                  <article class="item post-0 post type-post status-publish format-standard has-post-thumbnail hentry">
                    <a href="https://Jason-summer.github.io/post/the-experience-of-my-blog/" class="thumb hover-effect">
                      <span class="fullimage cover" style="display:block;border-radius:50%;background-image: url('/media/images/gridea.jpg');"></span>
                    </a>
                    <div class="info gradient-effect">
                      <time datetime="2020-04-28">2020-04-28</time>
                      <h4 class="title usmall">
                        <a href="https://Jason-summer.github.io/post/the-experience-of-my-blog/">建立个人博客的探索历程</a>
                      </h4>
                    </div>
                    <div class="clear"></div>
                  </article>
                  
                  
                  
                  <article class="item post-1 post type-post status-publish format-standard has-post-thumbnail hentry">
                    <a href="https://Jason-summer.github.io/post/mozilla-supports-the-open-covid-pledge-making-intellectual-property-freely-available-for-the-fight-against-covid-19/" class="thumb hover-effect">
                      <span class="fullimage cover" style="display:block;border-radius:50%;background-image: url('https://Jason-summer.github.io/post-images/mozilla-supports-the-open-covid-pledge-making-intellectual-property-freely-available-for-the-fight-against-covid-19.png');"></span>
                    </a>
                    <div class="info gradient-effect">
                      <time datetime="2020-04-25">2020-04-25</time>
                      <h4 class="title usmall">
                        <a href="https://Jason-summer.github.io/post/mozilla-supports-the-open-covid-pledge-making-intellectual-property-freely-available-for-the-fight-against-covid-19/">Mozilla 支持“开放冠状病毒协议”：为了战胜 COVID-19 开放使用知识产权</a>
                      </h4>
                    </div>
                    <div class="clear"></div>
                  </article>
                  
                  
                  
                  <article class="item post-2 post type-post status-publish format-standard has-post-thumbnail hentry">
                    <a href="https://Jason-summer.github.io/post/3-more/" class="thumb hover-effect">
                      <span class="fullimage cover" style="display:block;border-radius:50%;background-image: url('/media/images/gridea.jpg');"></span>
                    </a>
                    <div class="info gradient-effect">
                      <time datetime="2020-04-13">2020-04-13</time>
                      <h4 class="title usmall">
                        <a href="https://Jason-summer.github.io/post/3-more/">#3 More</a>
                      </h4>
                    </div>
                    <div class="clear"></div>
                  </article>
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  <div class="clear"></div>
                </section>
              </div>

              <div class="grid-33 tablet-grid-50 mobile-grid-100">
                <section id="tag_cloud-2" class="widget widget_tag_cloud underline-effect">
                  <h4 class="widget-title title white bordered">标签云</h4>
                  <div class="tagcloud">
                    
                      <a href="https://Jason-summer.github.io/tag/OOmQpIJga/" class="ctag ctag-0 ctag-OOmQpIJga" aria-label="">Gridea</a>
                    
                      <a href="https://Jason-summer.github.io/tag/translation/" class="ctag ctag-1 ctag-translation" aria-label="">翻译训练</a>
                    
                      <a href="https://Jason-summer.github.io/tag/markdown/" class="ctag ctag-2 ctag-markdown" aria-label="">Markdown</a>
                    
                      <a href="https://Jason-summer.github.io/tag/itPlsg2cI/" class="ctag ctag-3 ctag-itPlsg2cI" aria-label="">开发</a>
                    
                  </div>
                  <div class="clear"></div>
                </section>
              </div>

              <div class="grid-33 tablet-grid-50 mobile-grid-100">
                <section id="epcl_about-2" class="widget widget_epcl_about underline-effect">
                  <h4 class="widget-title title white bordered">关于我</h4>
                  <div class="avatar">
                    <a href="" class="translate-effect thumb"><span class="fullimage cover" style="background-image: url(https://Jason-summer.github.io/images/avatar.png);"></span></a>
                  </div>
                  <div class="info">
                    <h4 class="title small author-name gradient-effect no-margin"><a href="">夏元素的避风塘</a></h4>
                    <p class="founder">理想生活+</p>
                    <div class="social">
                      
                          
                            <a href="https://github.com/Jason-summer" class="translate-effect" target="_blank"><i class="fa fa-github"></i></a>
                        
                      
                        
                      
                        
                      
                        
                      
                          
                            <a href="https://jason-summer.github.io/atom.xml" class="translate-effect" target="_blank"><i class="fa fa-feed"></i></a>
                        
                      
                    </div> 
                  </div>
                  <div class="clear"></div>
                  </section>
              </div>

            </div>
            <div class="clear"></div>
        </div>

        <div class="logo">
          <a href="https://Jason-summer.github.io"><img src="/media/images/gridea.png" alt=""></a>
        </div>
        <p class="published border-effect">
          ©2019 共 13 篇文章
          <br/>
          Theme <a href="https://gridea.dev/" target="_blank">「breek」</a> Powered by <a href="https://gridea.dev/" target="_blank">「Gridea」</a>
        </p>
        
        <a href="javascript:void(0)" id="back-to-top" class="epcl-button dark" style="display:none">
          <i class="fa fa-arrow"></i>
        </a>
    </footer>
    
    <div class="clear"></div>

        

      
    <script src="https://Jason-summer.github.io/media/js/functions-post.js"></script>

    </div>
    <!-- end: #wrapper -->
  </body>
</html>
